<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layoutStudent}">

<head>
	<meta charset="UTF-8">
	<title>个人信息</title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="20">
			<el-col :span="5">
				<div class="user-img-circle">
	              <div class="img">
	                <!--<el-avatar
	                  :size="100"
	                  :src="userForm.accountLogo"
	                  align="center"
	                ></el-avatar>-->
					<el-upload align="center" class="avatar-uploader" action="/file/upload" :show-file-list="false"
						:on-success="handleUploadSuccess" :before-upload="beforeUploadImg">
						<img v-if="userForm.accountLogo" :src="userForm.accountLogo" class="img">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
	              </div>
	              <!--<div class="user-img-name">
	                <span>{{userForm.accountName}}</span>
	              </div>
	              <div class="user-img-text">
	                <span>{{userForm.accountNick}}</span>
	              </div>-->
	            </div>
			</el-col>
			<el-col :span="8">
				<el-form :model="userForm" :rules="accountRules" ref="userForm" label-width="100px">
					<el-form-item label="账号信息"></el-form-item>
					<el-form-item label="学号" >
						{{userForm.accountNumber}}
					</el-form-item>
					<el-form-item label="姓名" prop="accountName">
						<el-input v-model="userForm.accountName"></el-input>
					</el-form-item>
					<el-form-item label="昵称" prop="accountNick">
						<el-input v-model="userForm.accountNick"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="accountPassword">
						<el-input v-model="userForm.accountPassword"></el-input>
					</el-form-item>
					<el-form-item label="注册时间">
						{{userForm.accountTime}}
					</el-form-item>
					<el-form-item>
					    <el-button type="primary" @click="onUpdate">保存修改</el-button>
				  </el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		userForm:{},
		accountRules: {
          accountUser: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          accountName: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          accountPassword: [
            { required: true, message: '请输入', trigger: 'blur' }
          ]
        },
	}
	let vueMethods = {
		getInfo() {
			let that = this
			postRequst('/user/info', null).then(function (resp) {
				that.userForm = resp.data
			})
		},
		onUpdate() {
			let that = this
			that.userForm.accountTime = null
			postRequst('/user/saveInfo', that.userForm).then(function (resp) {
				if(resp.status == 0){
					that.getInfo()
					that.$message({message: resp.msg, type: "success"});
				}else{
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		handleUploadSuccess(res, file) {
			let imageUrl = URL.createObjectURL(file.raw);
			this.userForm.accountLogo = res.data
			this.onUpdate()
		}
	}
	function vueCreated() {
		let that = this
		that.getInfo()
	}

	// 初始化VUE
	/**new Vue({
		...mainApp, ...{
			created: vueCreated,
			data: {...mainApp.data, ...vueData},
			methods: {...mainApp.methods, ...vueMethods}
		}
	});**/
</script>

</html>